<template>
	<view class="content">
		<nav-bar title=' ' bgColor="rgba(255,255,255,0)" titleColor="#333333"></nav-bar>
		<view class="head-box">
			<view class="vip-bg-box"></view>
			<view class="left">
				<view class="img-box">
					<u-image :src="avatarUrl" shape="circle" width="112rpx" height="112rpx"></u-image>
					<view class="icon">
						<button class="avatar-wrapper" :plain="true" open-type="chooseAvatar"
							@chooseavatar="onChooseAvatar" />
						<u-icon name="camera-fill" size="24"></u-icon>
					</view>
				</view>
				<view class="name-box">
					<view class="name">
						<input type="nickname" @blur="changeNickName" @confirm="confirmNick" v-model="nickname"
							:placeholder="nickname" />
					</view>
					<view class="phone">
						<u--text prefixIcon="https://item.techolic.cn/hjf/Public/appimg/icon_my_phone.png"
							iconStyle="font-size: 19px" :text="phone"></u--text>
					</view>
				</view>
			</view>
			<view class="right">
				<u--text prefixIcon="https://item.techolic.cn/hjf/Public/appimg/icon_my_vip1.png"
					iconStyle="font-size: 24rpx;margin-right: 10rpx" size="24rpx" color="#1E182F"
					:text="vip_name"></u--text>
			</view>
		</view>
		<!-- <view class="vip-box"> -->
		<!-- <view class="p1">
				
				<u-text suffixIcon="arrow-right" iconStyle="font-size: 19px" size="32rpx" color="#587EAE" :bold="true" text="会员特权"></u-text>
			</view> -->
		<!-- <view class="p2">
				<view class="sub-title">
					总资产(元)
				</view>
				<view class="bottom">
					<view class="left">
						10,233.45
					</view>
					<view class="right">
						<u-text suffixIcon="arrow-right" iconStyle="font-size: 19px" size="32rpx" color="#587EAE" :bold="true" text="提现"></u-text>
					</view>
				</view>
			</view> -->
		<!-- </view> -->
		<view class="item-box">
			<view class="item">
				<u-cell-group :border="false">
					<block v-for="(item,index) in itemList">
						<u-cell :icon="item.icon" :title="item.title" @click="itemTap(item.itemTap)" :isLink="true"
							:border="false"></u-cell>
					</block>
				</u-cell-group>
			</view>
		</view>
		<u-popup :show="remindShow" @close="close" mode="center" :round="10" :closeable="true">
			<view class="popup-box">
				<view class="img-box">
					<u-image :show-menu-by-longpress="true" src="https://item.techolic.cn/hjf/Public/appimg/ewm.jpg"
						width="240rpx" height="240rpx"></u-image>
				</view>
				<view class="title">
					请关注公众号实时接收还款信息
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		name: "tab-my",
		data() {
			return {
				avatarUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
				nickname: 'Feng',
				itemList: [
				],
				vip_name: '',
				phone: '',
				remindShow: false,
			};
		},
		mounted() {
			app.globalData.index_login = 1;
			app.login();
			this.get_data();
		},
		methods: {
			get_data() {
				var _this = this;

				app._get('user/get_user', {}, function(res) {
					console.log(res);
					var info = res.data;
					_this.avatarUrl = info.img;
					_this.itemList = res.itemList;
					_this.nickname = info.name;
					_this.vip_name = info.vip_name;
					_this.phone = info.phone;
				});
			},
			changeNickName(e) {
				console.log(e)
				console.log(1);
				//失焦触发
				console.log('失焦触发');
				let that = this;
				that.post_user_name(e.detail.value);
				/**/
			},
			confirmNick(e) {
				//输入框点完成触发
				console.log(e)
				console.log(2)
				let that = this;
				//
				that.post_user_name(e.detail.value);
				console.log(that.nickname)
			},
			post_user_name(name) {
				let that = this;
				app._post_form('user/post_user_name', {
					cid: app.globalData.cid,
					name: name,

				}, function(result) {
					that.nickname = name
				}, false, function() {

				});
			},
			onChooseAvatar(e) {
				var _this = this
				const avatarUrl = e.detail.avatarUrl;
				console.log(e);
				console.log(33);
				console.log(app.globalData.api_root + 'user/upload_files?cid=' + app.globalData.cid);
				uni.uploadFile({
					url: app.globalData.api_root + 'user/upload_files?cid=' + app.globalData.cid, //仅为示例，非真实的接口地址
					filePath: avatarUrl,
					name: 'file',
					success: function(ressult) {
						/*var data = JSON.parse(uploadFileRes.data)
						console.log(data)
						if (data.code == 200) {
							_this.avatarUrl = data.data.img_path
						} else {
							uni.showModal({
								title: '提示',
								content: data.msg,
								success: function(res) {
									if (res.confirm)
										console.log('用户点击确定');
								}
							})
						}*/
						var data = JSON.parse(ressult.data);
						console.log(data);
						if (data.code == 1) {
							_this.avatarUrl = data.imgUrl;
						} else {
							app.showError(data.msg);
						}
					}
				})
			},
			itemTap(event) {
				console.log(event)
				if (event == "vipRechargeTap") {
					console.log('会员充值')
					uni.navigateTo({
						url: "/pages/vipBuyPage/vipBuyPage"
					})
				} else if (event == "platServiceTap") {
					console.log('平台服务')
					uni.navigateTo({
						url: "/pages/platformServicePage/platformServicePage"
					})
				} else if (event == "myServiceTap") {
					console.log('我的服务')
					uni.navigateTo({
						url: "/pages/myServicePage/myServicePage"
					})
				} else if (event == "remindTap") {
					console.log('还款提醒')
					this.remindShow = true
				} else if (event == "vipRechargeRecTap") {
					console.log('充值流水')
					uni.navigateTo({
						url: "/pages/vipRecordPage/vipRecordPage"
					})
				}
			},
			close() {
				this.remindShow = false
			},
		}
	}
</script>

<style lang="less">
	page {
		background-image: url('https://item.techolic.cn/hjf/Public/appimg/person_bg.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}
	.content {
		width: 750rpx;
		height: auto;
		padding-bottom: 160rpx;

		.vip-bg-box {
			position: absolute;
			right: 84rpx;
			width: 248rpx;
			height: 256rpx;
			background-image: url('https://item.techolic.cn/hjf/Public/appimg/icon_my_vip1.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			z-index: 0;
			opacity: 0.7;
		}

		.head-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 90rpx 32rpx;
			z-index: 999;

			.left {
				display: flex;
				align-items: center;
				width: 60%;

				.img-box {
					position: relative;

					.icon {
						position: absolute;
						right: -8rpx;
						bottom: -8rpx;

						button {
							position: absolute;
							top: -35px;
							left: -35px;
							width: 112rpx;
							height: 112rpx;
							background-color: rgba(#ffffff, 0);
							border: 0;
						}
					}
				}

				.name-box {
					margin-left: 20rpx;

					.name {
						font-size: 32rpx;
						font-weight: bold;
						margin-bottom: 16rpx;
					}

					.phone {
						color: #8e8b97;
					}
				}
			}

			.right {
				padding: 12rpx 20rpx;
				background-color: #ffffff;
				border-radius: 28rpx;
				color: #1E182F;
				z-index: 10;
			}
		}

		.item-box {
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			background-color: #ffffff;
			z-index: 11;
		}
		.popup-box{
			padding: 30rpx 40rpx;
			margin: 30rpx;
			.img-box{
				display: flex;
				align-items: center;
				justify-content: center;

			}
			.title{
				font-size: 24rpx;
				color: #8e8b97;
				padding: 30rpx 0;
			}
		}
	}
</style>